<template>
  <div class="twui-header">
    <div class="twui-header__hero">
      <h1>{{label}}</h1>
       <!-- 天气 -->
      <div style="position: absolute; top: 0vh; right: 20px; font-size: 18px;">{{datatime}}&nbsp;&nbsp;{{weather.weather}}&nbsp;&nbsp;{{weather.temperature}}&#8451;&nbsp;&nbsp;{{weather.winddirection}}风{{weather.windpower}}级&nbsp;&nbsp;湿度{{weather.humidity}}%</div>
    <!-- /天气 -->
    </div>
  </div>
</template>

<script scoped>
export default{
  props: ['label'],
  data () {
    return {
      datatime: '2020年8月18日',
      weathertimer: null,
      weather: {
        humidity: '0',
        reporttime: '2020年8月18日',
        temperature: '0',
        weather: '晴',
        winddirection: '东',
        windpower: '≤1'
      }
    }
  },
  mounted () {
    let vm = this
    this.getWeather()
    this.weathertimer = setInterval(() => {
      let today = new Date()
      vm.datatime = today.toISOString().substring(0, 10) + ' ' + today.toTimeString().substring(0, 9)
      if (today.toTimeString().substring(0, 8) === '00:00:01') {
        vm.getWeather()
      }
    }, 1000)
  },
  methods: {
    getWeather () {
      let vm = this
      this.$axios.get('https://open.teewon.net:9009/openapi-weather/getWeatherInfo?city=330400&ip=&extensions=base').then(res => {
        if (res.data && res.data.responseEntity && res.data.responseEntity.lives.length > 0) {
          vm.weather = res.data.responseEntity.lives[0]
        }
      }).catch(err => {
        console.error(err)
      })
    }
  },
  beforeDestroy () {
    if (this.weathertimer) {
      window.clearInterval(this.weathertimer)
    }
  }
}
</script>

<style lang="scss" scoped>
  .twui-header__hero{
    position: relative;
    h1{
      font-weight: 600;
      // background: linear-gradient(to right, #07ffff, #00a5fe) !important;
    // -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#1ee6e6), to(#008ef0));
      // background: #fff;
      // -webkit-background-clip: text !important;
      // color: transparent !important;
      background-image:-webkit-linear-gradient(bottom,#008ef0,#00fcfb);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .twtq-text{
      position: absolute;
      right: 18px;
      top: -10px;
      font-size: 14px;
    }
  }
</style>
